<template>
  <div class="content-container">
    <pro-form
      name="basic-info"
      :ref="formRef"
      :columns="columns"
      :model="formData"
      :labelCol="{ style: { width: '150px' } }"
      :formButtons="formButtons"
      showSubmitButton
      submitText="下一步"
      @submit="proFormSubmit"
    />
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, toRaw } from 'vue';
import type { ColumnType } from '@/components/pro-table/typing';
import ProForm from '@/components/pro-form/index.vue';
import { FormButtonType } from '@/components/pro-form/type';
import router from '@/router';
import useQuestionnaireStore from '@/store/questionnaire';
import { resetQuestionDataWithLanguage } from '@/components/question/utils';
import dayjs from 'dayjs';

const formData = reactive<any>({});
const formRef = ref();
const questionnaireStore = useQuestionnaireStore();
const basicInfo = questionnaireStore.getBasicInfo;

const columns: Array<ColumnType> = [
  {
    title: '问卷名称',
    dataIndex: 'name',
    valueType: 'text',
    colSpan: 20,
    value: basicInfo.name || '',
    rules: [
      {
        required: true,
        message: '请输入问卷名称',
        transform: (value: any) => console.log('transform:', value),
      },
    ],
  },
  {
    title: '中英文配置',
    dataIndex: 'language',
    valueType: 'checkboxGroup',
    colSpan: 20,
    value: basicInfo.language || [],
    options: [
      {
        label: '中文',
        value: 'zh',
      },
      {
        label: '英文',
        value: 'en',
      },
    ],
    rules: [{ type: 'array', required: true, message: '请选择中英文配置信息', trigger: 'change' }],
  },
  {
    title: '问卷有效期',
    dataIndex: 'period',
    valueType: 'rangePicker',
    colSpan: 20,
    showTime: true,
    format: 'YYYY-MM-DD HH:mm:ss',
    valueFormat: 'YYYY-MM-DD HH:mm:ss',
    value: basicInfo.startDate ? [dayjs(basicInfo.startDate), dayjs(basicInfo.endDate)] : [],
  },
  {
    title: '页脚配置',
    dataIndex: 'footer',
    valueType: 'richText',
    value: basicInfo.footer || '',
    colSpan: 20,
  },
];

const formButtons: Array<FormButtonType> = [
  {
    text: '上一步',
    onClick: () => {
      console.log('上一步', formData);
    },
  },
];

const proFormSubmit = (formData: any) => {
  const _basicInfo = toRaw(formData);
  if (formData.period) {
    _basicInfo.startDate = formData.period[0];
    _basicInfo.endDate = formData.period[1];
  }
  _basicInfo.mode = 'design';
  questionnaireStore.setBasicInfo(_basicInfo);
  if (questionnaireStore.getQuestions === undefined) {
    questionnaireStore.setQuestions([]);
  } else {
    resetQuestionDataWithLanguage(questionnaireStore.getQuestionnaire);
  }

  router.push({ name: 'QuestionDesign', params: { status: 'new' } });
};
</script>
